<script setup lang="ts">
import {Delete, Edit, InfoFilled} from "@element-plus/icons-vue";
import {getCourseListAPI, addCourseAPI, deleteCourseAPI} from "@/api/resource.ts";
import {onMounted, reactive, ref} from 'vue'
import {formattedDate} from "@/utils/formatDate.ts";
import {ElMessage, ElNotification} from "element-plus";
import {useCategoryStore} from "@/store/category.ts";
import {useCoachStore} from "@/store/coach.ts";

// 获取课程列表
const courseList = ref()
const getCourseList = async () => {
  const res = await getCourseListAPI()
  courseList.value = res.data
}

// 添加课程
const dialogAddCourseVisible = ref(false)
const courseData = reactive({
  name: '',
  desc: '',
  coverUrl: '',
  time: '',
  grade: '',
  consume: '',
  state: '',
  deadline: '',
  holding: '',
  category: '',
  termly: 1,
  coach: '',
  limit: ''
})
// 上传头像
const handlerCoverSuccess = async (res) => {
  courseData.coverUrl = res.data
}
const addCourse = async () => {
  const res = await addCourseAPI(courseData)
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: res.message
    })
    dialogAddCourseVisible.value = false
    await getCourseList()
  }
}

// 删除课程
const deleteCourse = async (id) => {
  const res = await deleteCourseAPI(id)
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: res.message
    })
    await getCourseList()
  }
}

// 等级列表
const gradeList = [
  {
    label: 'K1'
  },
  {
    label: 'K2'
  },
  {
    label: 'K3'
  },
  {
    label: 'K4'
  },
]

// 状态列表
const stateList = [
  {
    label: '预报名',
    value: 1
  },
  {
    label: '已结束',
    value: 2
  }
]

// 是否定期
const termlyList = [
  {
    label: '定期课程',
    value: 1
  },
  {
    label: '非定期课程',
    value: 2
  }
]

// 编辑课程
const EditCourse = () => {
  ElNotification({
    title: 'Warning',
    message: '为减缓服务器压力，暂关闭编辑接口及数据回显',
    type: 'warning',
  })
}

// 分类列表
const categoryStore = useCategoryStore()

// 教练列表
const coachStore = useCoachStore()

onMounted(() => {
  getCourseList()
})
</script>

<template>
  <el-card class="box-card">
    <div class="card-course-title">
      <el-button type="primary" @click="dialogAddCourseVisible = true">添加课程</el-button>
    </div>
    <div class="card-course-table">
      <el-table
          border
          class="el-table-box"
          ref="multipleTableRef"
          :data="courseList"
          style="width: 100%"
      >
        <el-table-column label="#" width="60" align="center" type="index"/>
        <el-table-column prop="name" align="center" label="名称"/>
        <el-table-column align="center" label="描述" width="200">
          <template #default="{row}">
            <div class="course-desc">
              {{ row.desc }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="封面">
          <template #default="{row}">
            <div class="course-img">
              <el-image hide-on-click-modal :src="row.coverUrl" :preview-teleported="true"
                        :preview-src-list="[row.coverUrl as string]"
                        alt=""/>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="time" align="center" label="耗时" width="60"/>
        <el-table-column prop="grade" align="center" label="等级" width="60"/>
        <el-table-column align="center" label="截止">
          <template #default="{row}">
            {{ formattedDate(row.deadline) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="控制" width="220">
          <template #default="{row}">
            <div class="operator-btn">
              <el-button type="primary" size="default" @click="EditCourse" :icon="Edit as any" circle/>
              <el-popconfirm
                  width="200"
                  @confirm="deleteCourse(row._id)"
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  :icon="InfoFilled as any"
                  icon-color="#f36b6c"
                  title="您确定删除此课程吗?"
              >
                <template #reference>
                  <el-button type="danger" size="default" :icon="Delete as any" circle/>
                </template>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Preview :visibleProp="viewerVisible" :imageLinkProp="currentImage" :onClose="closeImageViewer"/>
  </el-card>
  <el-dialog :close-on-click-modal="false" v-model="dialogAddCourseVisible" title="添加课程">
    <el-form
        :model="courseData"
        status-icon
        class="demo-ruleForm row"
    >
      <div>
        <el-form-item label="名称" prop="name">
          <el-input v-model="courseData.name" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="耗时" prop="time">
          <el-input v-model.number="courseData.time" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="等级" prop="grade">
          <el-select v-model="courseData.grade" class="m-2" placeholder="等级">
            <el-option
                v-for="(item, index) in gradeList"
                :key="index"
                :label="item.label"
                :value="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="人数" prop="limit">
          <el-input v-model.number="courseData.limit" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="消耗" prop="consume">
          <el-input v-model.number="courseData.consume" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="上传封面">
          <el-upload
              ref="uploadRef"
              class="upload-demo"
              :on-success="handlerCoverSuccess"
              action="http://116.62.147.119:3636/admin/coach/avatar"
          >
            <el-button type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </div>
      <div style="margin-left: 20px" class="right-content column">
        <div class="row">
          <el-date-picker
              v-model="courseData.deadline"
              type="date"
              placeholder="报名截止日期"
          />
          <el-date-picker
              v-model="courseData.holding"
              type="date"
              style="margin-left: 20px"
              placeholder="课程开始日期"
          />
        </div>
        <div class="row" style="margin-top: 20px">
          <el-select v-model="courseData.coach" class="m-2" placeholder="教练">
            <el-option
                v-for="item in coachStore.coachList"
                :key="item._id"
                :value="item._id"
                :label="item.name"
            />
          </el-select>
          <el-select style="margin-left: 20px" v-model="courseData.category" class="m-2" placeholder="分类">
            <el-option
                v-for="item in categoryStore.categoryList"
                :key="item._id"
                :value="item._id"
                :label="item.nickname"
            />
          </el-select>
        </div>
        <div class="row" style="margin-top: 20px">
          <el-select v-model="courseData.state" class="m-2" placeholder="状态">
            <el-option
                v-for="item in stateList"
                :key="item.value"
                :value="item.value"
                :label="item.label"
            />
          </el-select>
          <el-select style="margin-left: 20px" v-model="courseData.termly" class="m-2" placeholder="是否定期">
            <el-option
                v-for="item in termlyList"
                :key="item.value"
                :value="item.value"
                :label="item.label"
            />
          </el-select>
        </div>
        <el-form-item>
          <el-input type="textarea" :rows="3" v-model="courseData.desc" resize="none" placeholder="请写下课程描述..."
                    style="margin-top: 20px"/>
        </el-form-item>
        <div class="center">
          <el-button type="primary" style="width: 300px;" class="confirm-btn" @click="addCourse">确认</el-button>
        </div>
      </div>
    </el-form>
  </el-dialog>
</template>

<style scoped lang="scss">
.box-card {
  padding: 0 50px;

  .card-course-title {
    height: 35px;
    display: flex;
    justify-content: flex-end;
  }

  .card-course-table {
    margin-top: 20px;

    .el-table-box {
      height: calc(90vh - 140px);

      .el-table__cell {
        position: static !important; // 解决el-image 和 el-table冲突层级冲突问题
      }
    }

    .course-desc {
      display: -webkit-box; /*弹性伸缩盒子*/
      -webkit-box-orient: vertical; /*垂直排列*/
      line-height: 20px;
      -webkit-line-clamp: 1;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .course-img {
      width: 125px;
      height: 60px;

      .el-image {
        border-radius: 5px;
        width: 120px;
        height: 60px;
      }
    }
  }
}

.dialog-item {
  display: flex;
  flex-direction: row;
  height: 30px;
  align-items: center;

  p {
    margin-left: 12px;
  }
}
</style>